
import React from 'react'
import { View, Text, StyleSheet, InteractionManager } from 'react-native'
import store from 'react-native-simple-store';
import { getJson } from '../../utils/JsonUtil';
import NavCell from '../../components/NavCell';
import colors from '../../config/colors'
import Divider from '../../components/divider/Divider';

class MyTeam extends React.Component {
  constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
  };

  componentDidMount () {
    const { userActions } = this.props;
    InteractionManager.runAfterInteractions(() => {
      store.get('token')
        .then(token => {
          userActions.requestUser(token)
        })
    });
  }

  componentWillReceiveProps(nextProps) {
  };

  getMyTeamList () {
    let myTeamList;
    if (this.props.user && this.props.user.user) {
      myTeamList = this.props.user.user.my_team_list;
    }

    if (!myTeamList) {
      store.get('my_team_list')
        .then(teamJsonStr => {
          if (teamJsonStr) myTeamList = getJson(teamJsonStr)
        })
    }
    return myTeamList;
  }

  renderTeamListView () {
    const myTeamList = this.getMyTeamList();
    if (!myTeamList) {
      return (
        <View style={styles.emptyViewStyle}>
          <Text style={styles.emptyViewTextStyle}>暂无团队</Text>
        </View>
      )
    }
    let teamViewList = []
    for (var id in myTeamList) {
      teamViewList.push(this.renderNavItemView(id, myTeamList[id]))
    }

    return teamViewList;
  }

  onPress = (route) => {
    const { navigate } = this.props.navigation;
    navigate(route.name, route.args);
  };

  renderNavItemView (id, teamName) {
    return (
      <View key={id}>
          <Divider />
          <NavCell  
            title={teamName}
            rightTitle="设置"
            route={{name:'MyTeamSetting',  args:{id: id}}}
            onPressHandler={this.onPress}
          />
      </View>
    )
  }

  render () {
    return (
      <View style={styles.containerStyle}>
        { this.renderTeamListView() }
        <Divider />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  containerStyle: {
    marginTop: 20,
    backgroundColor: colors.grey9,
    flex: 1
  },
  emptyViewStyle: {
    flexDirection: 'row'
  },
  emptyViewTextStyle: {
    flex: 1,
    marginTop: 100,
    textAlign: 'center',
    color: colors.grey6,
    fontSize: 16
  }
})

export default MyTeam;